<template>
  <div id="wf">
    <div class="logo-box">
            <div class="convphoto-title">随手拍</div>
            <div class="convphoto-subtitle"><i class="line"></i>获取城市积分<i class="line"></i></div>
    </div>  
    <div v-for="item in items" class="photo-container">
        <div class="img-box">
            <img :src="item.src" @load="arrange">
        </div>
        <div class="subinfo-box">
            <span class="title">敬业的人们</span>
            <span class="vote-box" @click="praise"><i :class="{'act-vote': true}"></i><i class="vote-num">100</i>  </span>
        </div>
    </div>
  </div>
</template>

<script type="text/javascript">
    import index from './index';
    export default index;
</script>


<style lang="less" scoped>
@width: 167px;

#wf{
  position: relative;
  margin: 11px auto;
  .photo-container{
    width: @width;
    position: absolute;
    top: 0;
    left: 0;
    // .transition(left 1s);
    img{
      width: 100%;
      position: relative;
    }
  }
}

.transition(@transition){
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

.logo-box {
    position: absolute;
    width: 167px;
    height: 70px;
    right: 15px;
    top: 0;
    background: url('../img/plogo.png') no-repeat center;
    background-size: cover;
}

.convphoto-title {
    margin-top: 14px;  
    text-align: center;
    font-family: STHeitiSC-Medium;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.53px;   
}
.convphoto-subtitle{
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: -0.47px;
    line-height: 18px;
    margin-top: 5px; 
    text-align: center;
}
.line {
   display: inline-block; 
   width: 16px;
   height: 1px;
   opacity: 0.56;
   background: #FFFFFF;
   vertical-align: middle;
   margin: 0 3px;
}

.img-box {
    line-height: 0;
   
}
.subinfo-box {
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #000000;
    line-height: 18px;
    margin: 8px 0 14px 0;
    overflow: hidden;
}
.title {
    float: left;
}
.vote-box {
    float: right;
}
.act-vote {
    background: url('../img/vote.png') no-repeat center;
    background-size: cover; 
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

.vote-num {
    font-family: STHeitiSC-Light;
    font-size: 14px;
    color: #DF3031;
    vertical-align: middle;
    margin-left: 5px; 
}
</style>